<template>
  <a-tooltip placement="bottom">
    <template slot="title">
      <span>字体颜色</span>
    </template>
    <div class="font-icon-wrapper">
      <span :class="['iconfont', 'font-icon', {'font-icon-disabled': disabled}]" :style="iconStyle" @click="open">&#xe609;</span>
      <el-color-picker :predefine="predefineColors" class="design-font-color"
                       popper-class="ignore-event-for-design-table" ref="picker" color-format="rgb"
                       style="background: white; border-radius: 4px; margin-left: 10px"
                       @mousedown.stop v-model="innerValue" :disabled="disabled" size="mini"/>
    </div>
  </a-tooltip>
</template>
<script>
import {createModelForVue, createProps} from '@/utils';
import $ from 'jquery';
let colors = '#595959,#262626,#d4d7de,#1890ff,#409eff,#CC66CC,#9966CC,#6666CC,#3366CC,#336699,#666699,#996699,#CC6699,#CC99CC,#9999CC,#6699CC,#3399CC,#669999,#996666,#CC6666,#CC3333,#993333,#663333,#993366,#CC3366,#CC3399,#CC33CC,#339999,#33CCCC,#66CCCC,#99CCCC,#CCCCCC,#999999,#999966,#999933,#669933,#339933,#339966,#669966,#99CC99,#66CC99,#33CC99,#33CC66,#66CC66,#33CC33,#66CC33,#99CC33,#99CC66,#CCCC66,#CCCC33,#CCCC99,#CC9966,#CC9933,#996633,#CC6633,#CC9999,#666666,#336666,#336633,#666633,#333333,#333366,#333399,#3333CC,#6633CC,#663399,#993399,#9933CC,#663366'.split(',');

export default {
  name: 'FontColor',
  model: createModelForVue(),
  props: {
    section: createProps(Object, undefined),
    value: createProps(String),
    disabled: createProps(Boolean),
  },
  data() {
    return {
      predefineColors: colors
    };
  },
  methods: {
    open() {
      $(this.$refs.picker.$el).find('.el-color-picker__trigger').trigger('click');
    },
  },
  computed: {
    iconStyle() {
      return {
        '--border-color': this.innerValue,
      };
    },
    innerValue: {
      get() {
        return this.value;
      },
      set(v) {
        this.$emit('change', v);
        console.log(v)
        this.section && this.section.setStyle && this.section.setStyle('color', v);
      },
    }
  }
};
</script>
<style scoped>
.font-icon {
  color: white;
  border-bottom: 5px solid var(--border-color);
  padding: 0 5px;
  font-size: 12px;
}
</style>
<style>
.design-font-color {
  //position: absolute;
  bottom: -20px;
  left: 0;
}

.design-font-color,
.design-font-color .el-color-picker__mask,
.design-font-color .el-color-picker__trigger,
.design-font-color .el-color-picker {
  height: 0 !important;
  width: 0 !important;
  overflow: hidden;
}

.font-icon {
  position: absolute;
  left: 5px;
  cursor: pointer;
  font-size: 14px;
}

.font-icon-wrapper {
  height: 100%;
  text-align: center;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 35px;
}

.font-icon-disabled {
  color: #707070 !important;
  border-bottom: 5px solid #707070 !important;
  cursor: not-allowed;
}
</style>